*{padding: 0;margin: 0;box-sizing: border-box;} 
#container{display: none;}
#wrap{width: 500px;height: 500px; margin: 10px auto; margin-bottom: 0;}
#mask{width: 500px;height: 500px;background: -webkit-radial-gradient(100% 0%,purple,white, gray);  opacity: 0.7; position: absolute;left: 50%;top: 10px;transform: translate(-50%);text-align: center;}
#mask h2{font-size: 40px;color:gray;margin: 100px;text-shadow: 5px 5px 5px white; }
#mask p{font-size: 24px;margin-bottom: 30px;}
#mask .version{text-align: left;padding:10px ;}
#tips{width: 500px; margin:0 auto; color: red;font-size: 24px;}
#tips p:nth-child(1){color: purple;font-weight: bold;font-size: 30px;text-shadow: 5px 5px 5px gainsboro; margin-bottom:10px ;}
#tips p:nth-child(5){padding-bottom:30px;width: 100%;}
#control{width: 225px;height: 220px;display:none; margin: 5px auto;transform: rotate(45deg);}
#control #top{width: 230px; height:115px; margin: 0 auto;}
#control #bottom{width: 230px; height:110px; margin: 0 auto;}  
#control .btn{width: 100px; height:100px;transition: all 0.2s; border-radius:15px;background: #FF5722;margin: 5px; display: inline-block;}
#phone{display: none;}
#control .btn:hover{background: #F7B824;}
#back,#restart{width: 100px; height:60px;color: white; transition: all 0.2s; font-size: 24px; text-align:center; line-height:60px; background: #FF5722; position: absolute;border-radius: 15px;}
#back{right: 10px;top: 655px;}
#restart{left: 10px;top: 655px;}
#back:hover,#restart:hover{background: red;}
@media screen and (max-width: 1000px) { 
    #phone{display: block;}
    #control{display: block;}
    #window{display: none;}
}